import React, { useEffect } from 'react';

import echarts from "echarts";

export type MapProps = {
    style?: React.CSSProperties
    idName:string;
    name:string;
    value:number;
};

const Monitoring: React.FC<MapProps> = (props) => {

    const { style ,idName,name,value} = props
   

    useEffect(() => {

        const myChart = echarts.init(document.getElementById(idName));

        var option;

        option = {
           color:['#ebaf04','#ccc'],
          
            tooltip: {
                trigger: 'item'
            },
            title: {
                text: value+"%",
                subtext :name,
                style:{backgroundColor: '#ccc'},
                
                left: "center",
                top: "center",
                textStyle: {
                  fontSize: 18,
                  color: 'white'
                },
              },
            series: [
               
                {
                    type: 'pie',
                    radius: ['70%', '85%'],
                    label: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: value, name: name },
                        { value:(100-value).toFixed(2), name: '' },
                      
                    ]
                }
            ]
        };

        option && myChart.setOption(option);

        window.addEventListener('resize', function () {
            myChart.resize();
        });

    }, []);

    return (
        <div id={idName} style={style} ></div>
    );

};

export default Monitoring;